// 1.导入react依赖的包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 2.创建项目跟实例ReactDOM.createRoot（spa应用根组件挂载点元素DOM对象）
const root = ReactDOM.createRoot(document.getElementById('root'));
// 创建react的html元素
/**
 * React.createElement('html元素标签名'，{属性名：属性值，属性名2：属性值...},子元素，子元素...)
 * 注：class类名必须使用className
 */
// const li1 =React.createElement('li',null,'橘子')
// const li2 =React.createElement('li',null,'橘子')
// const li3 =React.createElement('li',null,'橘子')
// const ul=React.createElement('ul',{className:'list'},li1,li2,li3)
/**
 * jsx基本使用
 * 1.jsx元素名都是有效的html元素
 * 2.添加类名注意写成className
 * 3.label的for属性要写成htmlFor
 * 4.结构复杂建议用()包裹，避免打包时出错
 * 5.jsx元素只能有一个根元素(可使用幽灵节点<></>)
 */
const ul =(<ul className='box'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>
    <label htmlFor="test">选中</label>
    <input type="checkbox" id='test' />
  </li>
</ul>)

const test=<>
  <p>123</p>
  <p>456</p>
  </>


/**
 * jsx中的差值表达式（类比vue的胡子语法）
 * 语法：{变量|js表达式(有值)}
 * 注意：
 * 1.不能直接渲染对象
 * 2.不能绑定方法，可使用方法的调用
 */
let abc=123
let obj={
  name:'小明'
}
let arr=[1,1,1]
const fn=()=>{
  console.log('123')
  return 456
}
const fn2=()=>{
  return <h1>hi fn2</h1>
}
const box=(
  <ul>
    <li>{abc}</li>
    <li>{1+1}</li>
    <li>{abc>10?'true':'false'}</li>
    <li>{obj.name}</li>
    <li>{arr[1]}</li>
    <li>{fn()}</li>
    <li>{fn2()}</li>
    
  </ul>
)

/**
 * jsx条件渲染
 * 1.if/else
 * 2.三元表达式
 */

const isLoad=(loading)=>{
  if (loading) {
    return <h2>加载中。。。</h2>
  }else{
    return <h2>加载完成</h2>
  }
}

const box2=(
  <div>
    <div>{isLoad()}</div>
    <hr />
    <div>{true?<h2>加载中。。。</h2>:<h2>加载完成</h2>}</div>
    <hr />
    <div>
      {true&&<h2>加载中。。。</h2>}
    </div>
    <div>
      {true&&<h2>加载完成</h2>}
    </div>
  </div>
)

/**
 * jsx列表渲染
 * 需求：渲染后端方法的列表数据
 */
const list=[
  {id:1,name:'张三',salsry:2e4},
  {id:2,name:'张四',salsry:2e4},
  {id:3,name:'张五',salsry:2e4}
]
// 1.for循环
const renderlist=()=>{
  const _list=[]
  list.forEach(item=>{
    _list.push(<li key={item.id}>姓名：{item.name},期望薪资：{item.salsry}</li>)
  })
  return _list
}
// map循环:循环生成新数组
const _list=list.map(item=>{
  return <li key={item.id}>姓名：{item.name},期望薪资：{item.salsry}</li>
})
const listbox=(
<>
  <ul>
    {_list}
  </ul>
  <ul>
    {renderlist()}
  </ul>
</>
)

// 练习列表循环
const list1 = [
  { id: 1, name: '黑马86期', salary: 11000 },
  { id: 2, name: '黑马87期', salary: 12000 },
  { id: 3, name: '黑马88期', salary: 18000 }
]


const list1box=(
  <ul>
    {list1.map(item=><li key={item.id}><h3>班级:{item.name}</h3><p>工资:{item.salary}</p></li>)}
  </ul>
)
// 3.使用root根实例绘制用户界面
root.render(
  list1box
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

